import Vue from 'vue'
import Vuex from 'vuex'
import {INCREMENT} from './mutation-type.js'
// Mutation 类型常量:为什么有这个,是为了解决 store 里 mutations 里的方法名与组件里的方法名出现不一致问题(即用一个常量替代字符串方法名)

//1.安装插件
Vue.use(Vuex)

const ModuleA = {
    state: {
        status: '我是模块A里的state状态...',
        mingcheng: 'ModuleA Name',
    },
    mutations: {
        ModuleAUpdateUserInfo(state,payload){
            console.log(payload);
            state.mingcheng = payload
        }
    },
    getters:{
        fullName(state){
            return state.mingcheng + 'fullName...'
        },
        fullName2(state,getters){
            return getters.fullName + 'fullName2...'
        },
        fullName3(state,getters,rootState){
            return getters.fullName + rootState.counter
        }
    },
    actions:{
        moduleAasyncUpdateUserInfo(context,payload){
            setTimeout(()=>{
                context.commit('ModuleAUpdateUserInfo',payload)
            },3000)
        }
    }
}

//2.创建对象
const store = new Vuex.Store({
    state: {
        counter: 1000,
        users: [
            {name:"老四",type:"幼年",age:6},
            {name:"老三",type:"少年",age:16},
            {name:"老二",type:"成年",age:25},
            {name:"老大",type:"中年",age:36},
        ],
        userInfo: {
            name: "阿伦艾弗森",
            age: 41,
            profession: "前NBA运动员"
        }
    },
    mutations: { //通过 mutations 来操作 state,是【同步】的方式来处理共享变量的
        //方法里的 state 是默认的参数,直接拿来用就好了
        //increment (state) {
        [INCREMENT] (state) {
          state.counter++
        },
        decrement (state) {
          state.counter--
        },
        //有的时候我们希望可以通过传递参数的方式进行加加多少或减减多少
        //incrementByStep(state,step){
        incrementByStep(state,payload){
            //第一种接收参数的方式
            //state.counter += step
            
            //第二种接收参数的方式 payload是一个对象
            console.log(payload);
            state.counter += payload.step
        },
        pushUsers(state,user){
            state.users.push(user)
        },
        //syncUpdateUserInfo(state,username){
        syncUpdateUserInfo(state){
            //state.userInfo.name = username
            state.userInfo.name = '勒布朗詹姆斯'
            // setTimeout(() => {
            //     state.userInfo.name = username
            // }, 3000);
        }
    },
    /**
     * 需求:
     *  1. 对 counter 进行平方计算;
     *  2. 取出 users 里年龄大于 20 岁的人;
     *  3. 计算出年龄大于 20 岁的人的个数;
     *  4. 第二、第三个需求里的年龄是写死的,这样不灵活,封装一个可传入的年龄参数进行筛选 
    */
    getters: {
        counterSquare: state => {
          return state.counter * state.counter
        },
        takeOutAgeMore20: state => { //取出年龄大于 20 岁的人
            return state.users.filter( user => user.age > 20)
        },
        getAgeMore20Length: (state,getters) => {
            return '年龄大于20岁的人有' + getters.takeOutAgeMore20.length + '个'
        },
        accordingToIncomingAge: state => IncomingAge => state.users.filter( user => user.age > IncomingAge),
        // accordingToIncomingAge: function(state){
        //     return (IncomingAge) => {
        //         return state.users.filter( user => user.age > IncomingAge)
        //     }
        // }
    },
    actions:{
        //异步修改用户的信息
        // asyncUpdateUserInfo(context){
        //     setTimeout(()=>{
        //         context.commit('syncUpdateUserInfo')
        //     },3000)
        // }
        // asyncUpdateUserInfo(context,payload){ //接收 payload 参数
        //     setTimeout(()=>{
        //         context.commit('syncUpdateUserInfo')
        //         console.log(payload.message);
        //         payload.success()
        //     },3000)
        // }
        asyncUpdateUserInfo(context,payload){ 
            return new Promise((resolve,reject) => {
                setTimeout(()=>{
                    context.commit('syncUpdateUserInfo')
                    console.log(payload);
                    
                    resolve('666666')
                },3000)
            })
        }
    },
    modules:{
        ModuleA
    }
})

//3.导出 store 对象
 export default store